﻿<!DOCTYPE html>
<html>
<head>
	<title>Lotto</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<link href="Content/LottoTheme.min.css" rel="stylesheet" type="text/css" />
	<link href="Content/jquery.mobile.structure-1.1.0.min.css" rel="stylesheet" type="text/css" />
	<link href="Content/jquery-mobile-fluid960.min.css" rel="stylesheet" type="text/css" />
	<link href="Content/App.css" rel="stylesheet" type="text/css" />

	<script src="Scripts/cordova.js" type="text/javascript"></script>
	<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="Scripts/lawnchair-0.6.1.min.js" type="text/javascript"></script>
	<script src="Scripts/lawnchair-adapter-indexed-db-0.6.1.js" type="text/javascript"></script>
	<script src="Scripts/knockout.js" type="text/javascript"></script>
	<script src="Scripts/_Namespace.js" type="text/javascript"></script>
	<script src="Scripts/Models/Databases.js" type="text/javascript"></script>
	<script src="Scripts/Models/Models.js" type="text/javascript"></script>
	<script src="Scripts/Models/ViewModels.js" type="text/javascript"></script>
	<script src="Scripts/App-BindingHandlers.js" type="text/javascript"></script>
	<script src="Scripts/App.js" type="text/javascript"></script>
	<script src="Scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>

	<script type="text/javascript">
		var admob_vars = {
			pubid: 'a14f32eb7f17df9',
			bgcolor: '000000',
			text: 'FFFFFF',
			test: true,
			new_window: true,
			manual_mode: true
		};
	</script>
	<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>
</head>
<body>
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Följ Lotto</h1>
		</div>

		<div data-role="content">
			<div id="homeAdContainer"></div>

			<div data-role="controlgroup">
				<a href="#play" data-role="button" data-icon="check">Spela</a>
				<a href="#manageNumbers" data-role="button" data-icon="grid">Lägg till/ta bort rader</a>
				<a href="#settings" data-role="button" data-icon="gear">Inställningar</a>
			</div>
		</div>
	</div>

	<div id="play" data-role="page">
		<div data-role="header">
			<a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext">Tillbaka</a>
			<h1>Spela</h1>
			<a href="#settings" data-icon="gear" data-iconpos="notext" class="ui-btn-right">Inställningar</a>
		</div>

		<div data-role="content">
			<div id="playAdContainer"></div>

			<div class="container_12 ui-body-a ui-corner-all ui-bar-b">
				<div id="playButtons" class="numberField">
                    <div data-role="controlgroup" data-type="horizontal">
			            <div class="grid_2 ui-corner-tl"><input type="checkbox" id="cb1" data-number="1" /><label for="cb1">1</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb2" data-number="2" /><label for="cb2">2</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb3" data-number="3" /><label for="cb3">3</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb4" data-number="4" /><label for="cb4">4</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb5" data-number="5" /><label for="cb5">5</label></div>
			            <div class="grid_2 ui-corner-tr"><input type="checkbox" id="cb6" data-number="6" /><label for="cb6">6</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb7" data-number="7" /><label for="cb7">7</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb8" data-number="8" /><label for="cb8">8</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb9" data-number="9" /><label for="cb9">9</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb10" data-number="10" /><label for="cb10">10</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb11" data-number="11" /><label for="cb11">11</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb12" data-number="12" /><label for="cb12">12</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb13" data-number="13" /><label for="cb13">13</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb14" data-number="14" /><label for="cb14">14</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb15" data-number="15" /><label for="cb15">15</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb16" data-number="16" /><label for="cb16">16</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb17" data-number="17" /><label for="cb17">17</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb18" data-number="18" /><label for="cb18">18</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb19" data-number="19" /><label for="cb19">19</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb20" data-number="20" /><label for="cb20">20</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb21" data-number="21" /><label for="cb21">21</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb22" data-number="22" /><label for="cb22">22</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb23" data-number="23" /><label for="cb23">23</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb24" data-number="24" /><label for="cb24">24</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb25" data-number="25" /><label for="cb25">25</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb26" data-number="26" /><label for="cb26">26</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb27" data-number="27" /><label for="cb27">27</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb28" data-number="28" /><label for="cb28">28</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb29" data-number="29" /><label for="cb29">29</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb30" data-number="30" /><label for="cb30">30</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb31" data-number="31" /><label for="cb31">31</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb32" data-number="32" /><label for="cb32">32</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb33" data-number="33" /><label for="cb33">33</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb34" data-number="34" /><label for="cb34">34</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb35" data-number="35" /><label for="cb35">35</label></div>
		            </div>
                </div>
				<div class="grid_12">
					<div class="floatRight">
						<button id="clearPlayButtons" data-icon="delete" data-iconpos="notext">Rensa</button>
					</div>
				</div>
			</div>

			<div class="userRows">
				<div class="bestTotal ui-bar ui-bar-b ui-corner-all ui-li-has-count ui-li-static">
					Flest antal rätt: 
					<span class="ui-li-count ui-btn-up-c ui-btn-corner-all"><span class="number">0</span> + <span class="additional">0</span></span>
				</div>

				<ul data-bind="jqmRefreshList: numberRowsViewModel.numberRows" data-role="listview" data-inset="true">
					<li data-role="list-divider">Mina rader<span class="ui-li-aside">Antal rätt</span></li>

					<!-- ko foreach: numberRowsViewModel.numberRows -->
					<li data-icon="false">
						<a data-bind="foreach: Numbers">
							<span data-bind="text: $data, attr: { 'data-number': $data }"></span>
						</a>
						<span class="ui-li-count"><span class="number">0</span> + <span class="additional">0</span></span>
					</li>
					<!-- /ko -->
				</ul>
			</div>
		</div>
	</div>

	<div id="manageNumbers" data-role="page">
		<div data-role="header">
			<a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext">Tillbaka</a>
			<h1>Lägg till/ta bort rader</h1>
		</div>

		<div data-role="content">
			<div id="manageNumbersAdContainer"></div>

			<div data-role="fieldcontain" class="userRows">
				<a href="#addRowDialog" data-bind="visible: numberRowsViewModel.canAddRows, jqmRefreshButton: numberRowsViewModel.canAddRows" data-role="button" data-icon="plus">Ny rad</a>
				
				<ul data-bind="jqmRefreshList: numberRowsViewModel.numberRows" data-role="listview" data-inset="true">
					<li data-role="list-divider">Mina rader<span class="ui-li-aside">Ta bort</span></li>

					<!-- ko foreach: numberRowsViewModel.numberRows -->
					<li data-icon="false">
						<a data-bind="foreach: Numbers">
							<span data-bind="text: $data, attr: { 'data-number': $data }"></span>
						</a>
						<a href="#deleteRowDialog" data-bind="click: $root.numberRowsViewModel.setCurrentRow" data-rel="dialog" data-icon="delete">Ta bort</a>
					</li>
					<!-- /ko -->
				</ul>
			</div>
		</div>
	</div>

	<div id="addRowDialog" data-role="page">
		<div data-role="header">
			<h1>Ny rad</h1>
		</div>

		<div data-role="content">
			<h5 class="center">Välj 7 nummer</h5>

			<div class="container_12 ui-body-a ui-corner-all ui-bar-b">
				<form id="newRowButtons" class="numberField">
                    <div data-role="controlgroup" data-type="horizontal">
			            <div class="grid_2 ui-corner-tl"><input type="checkbox" id="cb_1" data-number="1" /><label for="cb_1">1</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_2" data-number="2" /><label for="cb_2">2</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_3" data-number="3" /><label for="cb_3">3</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_4" data-number="4" /><label for="cb_4">4</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_5" data-number="5" /><label for="cb_5">5</label></div>
			            <div class="grid_2 ui-corner-tr"><input type="checkbox" id="cb_6" data-number="6" /><label for="cb_6">6</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_7" data-number="7" /><label for="cb_7">7</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_8" data-number="8" /><label for="cb_8">8</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_9" data-number="9" /><label for="cb_9">9</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_10" data-number="10" /><label for="cb_10">10</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_11" data-number="11" /><label for="cb_11">11</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_12" data-number="12" /><label for="cb_12">12</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_13" data-number="13" /><label for="cb_13">13</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_14" data-number="14" /><label for="cb_14">14</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_15" data-number="15" /><label for="cb_15">15</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_16" data-number="16" /><label for="cb_16">16</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_17" data-number="17" /><label for="cb_17">17</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_18" data-number="18" /><label for="cb_18">18</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_19" data-number="19" /><label for="cb_19">19</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_20" data-number="20" /><label for="cb_20">20</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_21" data-number="21" /><label for="cb_21">21</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_22" data-number="22" /><label for="cb_22">22</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_23" data-number="23" /><label for="cb_23">23</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_24" data-number="24" /><label for="cb_24">24</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_25" data-number="25" /><label for="cb_25">25</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_26" data-number="26" /><label for="cb_26">26</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_27" data-number="27" /><label for="cb_27">27</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_28" data-number="28" /><label for="cb_28">28</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_29" data-number="29" /><label for="cb_29">29</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_30" data-number="30" /><label for="cb_30">30</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_31" data-number="31" /><label for="cb_31">31</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_32" data-number="32" /><label for="cb_32">32</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_33" data-number="33" /><label for="cb_33">33</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_34" data-number="34" /><label for="cb_34">34</label></div>
			            <div class="grid_2"><input type="checkbox" id="cb_35" data-number="35" /><label for="cb_35">35</label></div>
		            </div>
                </form>
				<div class="grid_12">
					<div class="floatLeft">
						<button id="generateRandomNumbers" data-icon="refresh" data-iconpos="notext">Slumpa fram nummer</button>
					</div>
					<div class="floatRight">
						<button id="clearNewRowButtons" data-icon="delete" data-iconpos="notext">Rensa</button>
					</div>
				</div>
			</div>

			<div id="addRowDialogAdContainer"></div>

			<div data-role="fieldcontain">
				<button id="saveRow" data-bind="click: numberRowsViewModel.addRow" data-rel="back" data-icon="check" disabled="disabled">Spara</button>
				<a href="#" data-role="button" data-rel="back" data-icon="delete">Avbryt</a>
			</div>
		</div>
	</div>

	<div id="settings" data-role="page">
		<div data-role="header">
			<a href="#" data-role="button" data-rel="back" data-icon="back" data-iconpos="notext">Tillbaka</a>
			<h1>Inställningar</h1>
		</div>

		<div data-role="content">
            <ul data-role="listview">
                <li data-role="fieldcontain">
                    <input type="checkbox" name="checkbox-beepOnNotify" id="checkbox-beepOnNotify" data-bind="checked: settingsViewModel.beepOnNotify, jqmRefreshCheckbox: settingsViewModel.beepOnNotify" />
                    <label for="checkbox-beepOnNotify">Notifiera vinst med ljud</label>
                </li>
            </ul>
		</div>
	</div>

	<div id="deleteRowDialog" data-role="dialog">
		<div data-role="header">
			<h1>Ta bort rad</h1>
		</div>

		<div data-role="content">
			<div data-role="fieldcontain">
				Vill du ta bort denna rad?
				<h3 data-bind="text: numberRowsViewModel.selected().Id" class="center"></h3>
			</div>

			<div data-role="fieldcontain">
				<button id="deleteRow" data-bind="click: numberRowsViewModel.deleteRow" data-icon="check" data-theme="d">Ja</button>
				<a href="#" data-role="button" data-rel="back" data-icon="delete">Avbryt</a>
			</div>
		</div>
	</div>
</body>
</html>